import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Star, Tag, Filter, MapPin } from 'lucide-react';
export function Cycling() {
  const featuredGear = [{
    id: 'santa-cruz-hightower',
    name: 'Santa Cruz Hightower C S',
    category: 'Mountain Bikes',
    rating: 4.9,
    price: '$5,299',
    image: 'https://images.unsplash.com/photo-1511994298241-608e28f14fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'giro-manifest',
    name: 'Giro Manifest Spherical MIPS',
    category: 'Helmets',
    rating: 4.8,
    price: '$260',
    image: 'https://images.unsplash.com/photo-1573236715976-fe0b78c66f17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'five-ten-freerider',
    name: 'Five Ten Freerider Pro',
    category: 'Shoes',
    rating: 4.7,
    price: '$150',
    image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'ortlieb-bikepacking',
    name: 'Ortlieb Seat-Pack',
    category: 'Bikepacking',
    rating: 4.8,
    price: '$160',
    image: 'https://images.unsplash.com/photo-1622902046580-2e0863fd269a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'park-tool-pk4',
    name: 'Park Tool PK-4 Professional Tool Kit',
    category: 'Tools',
    rating: 4.9,
    price: '$329',
    image: 'https://images.unsplash.com/photo-1519058229601-d7b7117b5f36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'garmin-edge-1040',
    name: 'Garmin Edge 1040 Solar',
    category: 'Electronics',
    rating: 4.7,
    price: '$749',
    image: 'https://images.unsplash.com/photo-1615714214051-a52b9d6afb5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }];
  const trails = [{
    id: 'whole-enchilada',
    name: 'The Whole Enchilada',
    location: 'Moab, Utah',
    image: 'https://images.unsplash.com/photo-1594278341680-eb34c18d9961?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'whistler-bike-park',
    name: 'Whistler Bike Park',
    location: 'British Columbia, Canada',
    image: 'https://images.unsplash.com/photo-1473466668817-01a3f7dcef77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'great-divide',
    name: 'Great Divide Mountain Bike Route',
    location: 'USA & Canada',
    image: 'https://images.unsplash.com/photo-1541625602330-2277a4c46182?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }];
  const categories = ['Mountain Bikes', 'Gravel Bikes', 'Bikepacking', 'Components', 'Apparel', 'Protection', 'Tools', 'Electronics'];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
        <img src="https://images.unsplash.com/photo-1541625602330-2277a4c46182?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="On Two Wheels" className="absolute w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-earth-dark to-transparent"></div>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h1 className="font-display text-5xl md:text-7xl text-white mb-4 drop-shadow-lg">
            ON TWO WHEELS
          </h1>
          <p className="text-xl md:text-2xl text-sand-light mb-8 max-w-3xl mx-auto drop-shadow-md">
            Gear for mountain biking, bikepacking, and cycling adventures
          </p>
        </div>
      </section>
      {/* Category Navigation */}
      <section className="py-8 bg-carbon-black sticky top-[73px] z-30">
        <div className="container mx-auto px-4 overflow-x-auto">
          <div className="flex space-x-4">
            {categories.map(category => <a key={category} href={`#${category.toLowerCase().replace(' ', '-')}`} className="whitespace-nowrap px-4 py-2 rounded-full bg-earth-dark hover:bg-outdoor-orange transition-colors">
                {category}
              </a>)}
          </div>
        </div>
      </section>
      {/* Featured Gear */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              TOP-RATED CYCLING GEAR
            </h2>
            <div className="flex space-x-4">
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-outdoor-orange transition-colors">
                <Filter size={18} />
                <span>Filter</span>
              </button>
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-outdoor-orange transition-colors">
                <Tag size={18} />
                <span>Sort</span>
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredGear.map(item => <Link key={item.id} to={`/review/${item.id}`} className="group">
                <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                  <div className="relative h-64 overflow-hidden">
                    <img src={item.image} alt={item.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                    <div className="absolute top-0 left-0 bg-outdoor-orange px-3 py-1">
                      <span className="font-display text-sm">
                        {item.category}
                      </span>
                    </div>
                  </div>
                  <div className="p-6 flex flex-col flex-grow">
                    <div className="flex items-center mb-2">
                      <div className="flex text-outdoor-orange">
                        {[...Array(5)].map((_, i) => <Star key={i} size={16} className={i < Math.floor(item.rating) ? 'fill-outdoor-orange' : 'text-gray-600'} />)}
                      </div>
                      <span className="ml-2 text-gray-400">{item.rating}</span>
                    </div>
                    <h3 className="font-display text-xl mb-2 group-hover:text-outdoor-orange transition-colors">
                      {item.name}
                    </h3>
                    <div className="mt-auto flex justify-between items-center">
                      <span className="text-lg font-bold">{item.price}</span>
                      <span className="text-outdoor-orange flex items-center">
                        View Details
                        <ArrowRight size={16} className="ml-1 transition-transform group-hover:translate-x-1" />
                      </span>
                    </div>
                  </div>
                </div>
              </Link>)}
          </div>
          <div className="mt-8 text-center">
            <button className="bg-outdoor-orange hover:opacity-90 text-white font-display px-8 py-3 rounded transition-colors">
              VIEW ALL CYCLING GEAR
            </button>
          </div>
        </div>
      </section>
      {/* Featured Trails */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8">
            ICONIC TRAILS & ROUTES
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {trails.map(trail => <div key={trail.id} className="group relative h-80 overflow-hidden rounded-lg">
                <img src={trail.image} alt={trail.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="font-display text-2xl text-white mb-1">
                    {trail.name}
                  </h3>
                  <div className="flex items-center text-gray-300 mb-4">
                    <MapPin size={16} className="mr-1" />
                    <span>{trail.location}</span>
                  </div>
                  <Link to={`/trails/${trail.id}`} className="inline-flex items-center text-outdoor-orange">
                    <span className="mr-1">Trail Guide</span>
                    <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
                  </Link>
                </div>
              </div>)}
          </div>
        </div>
      </section>
      {/* Cycling Guides */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              CYCLING GUIDES & RESOURCES
            </h2>
            <Link to="/guides" className="flex items-center text-outdoor-orange hover:text-climbing-red transition-colors">
              <span className="mr-2 font-display">VIEW ALL GUIDES</span>
              <ArrowRight size={20} />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Link to="/guides/bike-maintenance" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1519058229601-d7b7117b5f36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Bike Maintenance Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">16 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                    Essential Mountain Bike Maintenance
                  </h3>
                  <p className="text-gray-300">
                    Keep your mountain bike performing at its best with our
                    comprehensive maintenance guide covering everything from
                    daily checks to seasonal overhauls.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/bikepacking-essentials" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1622902046580-2e0863fd269a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Bikepacking Essentials" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">18 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                    Bikepacking Essentials: Gear and Planning
                  </h3>
                  <p className="text-gray-300">
                    Everything you need to know to plan your first bikepacking
                    adventure, from route planning to essential gear and packing
                    strategies.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/mountain-bike-selection" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1511994298241-608e28f14fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Mountain Bike Selection Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">20 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                    How to Choose the Perfect Mountain Bike
                  </h3>
                  <p className="text-gray-300">
                    Navigate the complex world of mountain bike categories,
                    geometry, components, and suspension to find your ideal
                    ride.
                  </p>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </section>
    </div>;
}